import React from 'react'
import ReactDOM from 'react-dom'
import { List, InputItem, WhiteSpace, Switch, Button, TextareaItem, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';
import CustomImagePicker from '../../../components/image-picker'
import {post} from '../../../axios'
import history from '../../../history'
const Item = List.Item

class A extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
          hasError: false,
          files: [],
        }
    }

    componentDidMount() {
        let h = document.body.clientHeight
        window.addEventListener('resize', ()=> {
            if ( document.body.clientHeight < h) {
                document.body.style.overflowY = 'scroll'
            } else {
                document.body.style.overflowY  = 'initial'
            }
        })
    }

    onChange = (files, type, index) => {
        console.log(files, type, index);
        this.setState({
          files,
        });
    }

    submit = () => {
        let imgs = this.state.files.map(x => x.uri)
        
        this.props.form.validateFields((errors, value) => {
            if (value.agree !== true) {
                Toast.fail('请先同意服务条款再使用')
                return false
            }
            value.resource = imgs
            console.log(errors,value)
            if (errors) {
              this.setState({hasError: true})
            } else {
                if (!imgs[0]) {
                    Toast.fail('请上传资质证明')
                    return;
                }
                // this.post_data(value)
                this.post_data({...value, resource: this.state.files})
            }
        });
    }

    post_data(data) {
        post('/mem/expert', data).then(resp => {
            if (resp.success) {
                Toast.success('提交成功')
                history.go(-1)
            } else {
                Toast.fail(resp.msg)
            }
        }).catch(err=>console.log(err))
    }

    render() {
        const { getFieldProps, getFieldError } = this.props.form,
            {files, hasError} = this.state
        return (
            <div className='form-div' ref ={el => this.lv = el} style={{position: 'relative'}}>

                <List>
                    <List.Item multipleLine wrap>您正在申请专家认证，请填写如下的信息以便完成申请过程。</List.Item>
                </List>
                <WhiteSpace/>

                <List>
                    <InputItem
                        {...getFieldProps('username',
                            {rules: [{required: true, message: '真实姓名必须填写'}]}
                        )
                        }
                        type='text'
                        clear
                    >真实姓名
                    </InputItem>
                    {getFieldError('username')&&hasError?<div className='err-msg'>{getFieldError('username')}</div>: null }
                </List>
                <WhiteSpace/>

                <List>    
                    <InputItem
                        {...getFieldProps('mobile',
                        {rules: [{required: true, message: '手机号码必须填写'}]}
                        )
                        }
                        type='text'
                        clear
                    >手机号码
                    </InputItem>
                    {getFieldError('mobile')&&hasError?<div className='err-msg'>{getFieldError('mobile')}</div>: null }
                </List>
                <WhiteSpace/>
                
                <List>    
                    <TextareaItem
                    {...getFieldProps('note',
                        {rules: [{required: true, message: '资质说明必须填写'}]}
                    )
                    }
                    title="资质说明"
                    rows={5}
                    count={100}
                    />
                    {getFieldError('note')&&hasError?<div className='err-msg'>{getFieldError('note')}</div>: null }
                </List>
                <WhiteSpace/>

                <List><List.Item>资质扫描</List.Item></List>
                <List >    
                
                <CustomImagePicker 
                    files={files} 
                    callback={(files, type, index) => this.setState({files})}
                />
                
                </List>

                <div className='p-bottom2' ref ={el => this.bb = el}>
                <List>
                    <Item
                        extra={
                        <Switch 
                        color="#0ea2ec"
                        {...getFieldProps('agree', {
                        initialValue: true,
                        valuePropName: 'checked',
                        })}/>}
                        >我已阅读并同意《服务条款》
                    </Item>
                </List>
                <Item>
                    <Button type="primary" onClick={this.submit}>提交</Button>
                </Item>
                </div>
            </div>
        )
    }
}
export default createForm()(A)